<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生基本信息管理</title>
    <script src="../sys/jquery.min.js"></script>
    <style>
        table#stu
        {
            width: 100%;
            align-content:center;
            border: 1px solid black;
        }
        table#stu tr
        {
            height: 50px;
        }
        table#stu tr td
        {
            border: 1px solid #2a2222;
        }
    </style>
</head>
<h3 style="color: brown;text-align:center;">学生基本信息管理</h3>
<hr width="100%"/>
<br/>
    学号:<input style="width:100px;" id="no" type="text" value="">
    姓名:<input style="width:50px;" id="name" type="text" value="">
    性别: <select  id="sex">
        <option value="男">男</option>
        <option value="女">女</option>
    </select>
    生日:<input style="width:60px;"id="birth" type="text" value="">
    班级:
    <select  style="width:80px;" id="iclass">
        <option value="信息20-1班">信息20-1班</option>
        <option value="信息20-2班">信息20-2班</option>
    </select>
    

    住所:<input style="width:100px;"id="address" type="text" value="">
    <input id="addStu" type="button" value="新增"/>
    <input style="width:200px;"id="address" type="text" value="">
    <input type="button" value="搜索"/>
    <br></br>
    <table id="stu" cellpadding="0" cellspacing="0">
        <tr>
            <td>序号</td>
            <td>学号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>出生年月日</td>
            <td>班级</td>
            <td>宿舍位置</td>
            <td>操作</td>
        </tr>
        
    </table>
    <script>
        var arrStu=[
            {no:'20210101',
            name:'王诗雨',
            sex:'女',
            birth:'2001-8-6',
            iclass:'信息20-1班',
            address:'12号楼'},
            {no:'20210102',
            name:'苏俊逸',
            sex:'男',
            birth:'2001-8-7',
            iclass:'信息20-1班',
            address:'11号楼'
            },
            {no:'20210103',
            name:'王琳欣',
            sex:'女',
            birth:'2001-8-8',
            iclass:'信息20-1班',
            address:'12号楼'
            }
        ];
        function displayStuinfo(xh,stu)
        {
            var str="";
            str +="<tr><td>"+(xh)+"</td>"
            for(var i=0;i<arrStu.length;i++){

                        for(var key in stu){
                            str +="<td>"+stu[key]+"</td>";
                        }
                    str +='<td><input onclick="deleteStuInfo('+xh+',this)" type="button" value ="删除" /><input onclick="modiStuInfo('+xh+',this)" type="button" value ="修改">'
                    str +="</tr>"
                    return str;
                }
        }
        function displayStuinfos(){
                var str="";
                for(var i=0;i<arrStu.length;i++){
                    str +=displayStuinfo(i+1,arrStu[i]);
                   /*  str +="<tr><td>"+(i+1)+"</td>"
                        for(var key in arrStu[i]){
                            str +="<td>"+arrStu[i][key]+"</td>";
                           
                            str +="</td>"
                        }
                    str +='<td><input type="button" value ="删除" /><input type="button" value ="修改">'
                    str +="</tr>" */
                }
               /*  alert(str); */
               $("#stu").append(str);
                
            }//只要数组里有东西就显示出来
            function empty()
            {
               $("#no").val("");
               $("#name").val("");
               $("#birth").val("");
               $("#address").val("");
            }
            function addStuInfo(){
/*                 var falg = false; */
                var no = $("#no").val();
                var name = $("#name").val();
                var sex = $("#sex").val();
                var birth= $("#birth").val();
                var iclass= $("#iclass").val();
                var address=$("#address").val();
                if($("#addStu").val() =="新增")
                {
                    arrStu.push(
                    {
                        no:no,
                        name:name,
                        sex:sex,
                        birth:birth,
                        iclass:iclass,
                        adddress:address

                    }
                );
               $("#stu").append(displayStuinfo(arrStu.length,arrStu[arrStu.length-1])) ;
               empty();
                }
                else{
                    var tr= $("#stu tr").eq(curStu+1);

                    if(no != arrStu[curStu].no)
                    {
                        arrStu[curStu].no=no;
                        tr.find("td:eq(1)").html(no);
                        /* falg =true; */
                    }
                    if(name != arrStu[curStu].name)
                    {
                        arrStu[curStu].name=name;
                        tr.find("td:eq(2)").html(name);
                     /*    falg =true; */
                    }
                    if(sex != arrStu[curStu].sex)
                    {
                        arrStu[curStu].sex=sex;
                        tr.find("td:eq(3)").html(sex);
                      /*   falg =true; */
                    }
                    if(birth != arrStu[curStu].birth)
                    {
                        arrStu[curStu].birth=birth;
                        tr.find("td:eq(4)").html(birth);
                       /*  falg =true; */
                    }
                    if(iclass != arrStu[curStu].iclass)
                    {
                        arrStu[curStu].iclass=iclass;
                        tr.find("td:eq(5)").html(iclass);
                      /*   falg =true; */
                    }
                    if(address != arrStu[curStu].address)
                    {
                        arrStu[curStu].address=address;
                        tr.find("td:eq(6)").html(address);
                       /*  falg =true; */
                    }
  /*                   if(flag)
                    {
                       var tr= $("#stu tr").eq(curStu);
                       tr.find("td:eq(1)").html(no);
                    } */

                }
                empty();
                $("#addStu").val("新增").css("color","#black");
            }
            var curStu = -1;
            function modiStuInfo(xh){
                var stu = arrStu[xh-1];
                $("#no").val(stu.no);
                $("#name").val(stu.name);
                $("#sex").val(stu.sex);
                $("#birth").val(stu.birth);
                $("#iclass").val(stu.iclass);
                $("#address").val(stu.address);
                $("#addStu").val("保存").css("color","#0099CC");
                curStu = xh-1;
            }
            function deleteStuInfo(xh,obj)
            {
                arrStu.splice(xh-1,1);
                $(obj).parent().parent().remove();
            }
        $(document).ready(function()
        {
            displayStuinfos();
            $("#addStu").click(function(){
                addStuInfo();
            });
        })
    </script>
</body>
</html>